<template>
  <div class="page">
    <el-card>
      <div>
        <el-button type="primary" icon="el-icon-plus" size="small" @click="onAdd">添加</el-button>
      </div>
      <el-table :data="listData" style="width: 100%">
        <el-table-column prop="id" label="操作模式" min-width="150">
        </el-table-column>
        <el-table-column prop="id" label="ICMP失败后执行的动作" min-width="180">
        </el-table-column>
        <el-table-column prop="id" label="强制重启延时">
        </el-table-column>
        <el-table-column prop="id" label="周期">
        </el-table-column>
        <el-table-column prop="id" label="ping主机">
        </el-table-column>
        <el-table-column prop="id" label="ping周期">
        </el-table-column>
      </el-table>
      <div class="l-f l-row-end l-mg-top10">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page"
          background :page-sizes="[20, 30, 50, 100]" :page-size="params.pageSize"
          layout="sizes, prev, pager, next" :total="400">
        </el-pagination>
      </div>
      <el-dialog :title="isEdit ? '编辑' : '新增'" :visible.sync="dialogVisible" width="800px">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px">
          <el-form-item label="操作模式：" prop="model">
            <el-select v-model="ruleForm.model" placeholder="请选择操作模式">
              <el-option v-for="(item, index) in models" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="ICMP失败后执行的动作：" prop="action">
            <el-select v-model="ruleForm.action" placeholder="请选择ICMP失败后执行的动作">
              <el-option v-for="(item, index) in actions" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-tooltip class="item" effect="dark" content="第一个周期检测链接失败会重启相关服务，如果能检测到第二周期失败才重启系统" placement="right">
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="强制重启延时" prop="time">
            <el-input-number v-model="ruleForm.time" :min="0" :max="999999999" placeholder="请输入强制重启延时"></el-input-number>
            <el-tooltip class="item" effect="dark"
              content="当重启系统的时候WatchCat将会发一个软重启，在这里输入一个0的值，如果软重启失败将会融发一个延退的硬重启，输入秘数启用，输入0禁上功能" placement="right">
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="周期：" prop="period">
            <el-select v-model="ruleForm.period" placeholder="请选择周期">
              <el-option v-for="(item, index) in periods" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-tooltip class="item" effect="dark" content="在周期模式，此处定义了重启的周期。在联网模式，这个表示没有网络连接情况下到执行重启的最长时间间隔."
              placement="right">
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="ping主机" prop="host">
            <div class="l-f">
              <IPAddress v-model="ruleForm.host" />
              <el-tooltip class="item" effect="dark" content="ping主机地址" placement="right">
                <i class="el-icon-warning"></i>
              </el-tooltip>
            </div>
          </el-form-item>
          <el-form-item label="ping周期" prop="unit">
            <div class="l-f">
              <el-input placeholder="请输入ping周期" v-model="ruleForm.unit" clearable style="width: 200px;">
              </el-input>
              <el-tooltip class="item" effect="dark" content="检测网络连接的频率。默认单位为秒，你可以使用m'作为后缀表示分钟，h?表示小时d”表示天."
                placement="right">
                <i class="el-icon-warning"></i>
              </el-tooltip>
            </div>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="resetForm('ruleForm')">重 置</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import IPAddress from '@/components/IPAddress/index.vue'
export default {
  components: {
    IPAddress
  },
  data() {
    return {
      listData: [],
      params: {
        page: 1,
        pageSize: 20
      },
      dialogVisible: false,
      isEdit: false,

      ruleForm: {
        model: '',
        action: '',
        time: 0,
        period: '',
        host: '',
        unit: ''
      },
      rules: {
        model: [
          { required: true, message: '请选择操作模式', trigger: 'change' }
        ],
        action: [
          { required: true, message: '请选择ICMP失败后执行的动作', trigger: 'change' }
        ],
        time: [
          { required: true, message: '强制重启延时', trigger: 'blur' }
        ],
        period: [
          { required: true, message: '请选择周期', trigger: 'change' }
        ],
        host: [
          { required: true, message: '请输入ping主机', trigger: 'blur' }
        ],
        unit: [
          { required: true, message: '请输入ping周期', trigger: 'blur' }
        ]
      },
      models: [
        {
          label: 'Ping然后网络断开后重启',
          value: 0
        },
        {
          label: '定期重启系统',
          value: 1
        }
      ],
      actions: [
        {
          label: '网络断开后重启系统',
          value: 0
        },
        {
          label: '先重启3g网络，仍未恢复则重启系统',
          value: 1
        },
        {
          label: '先重启wan网络，仍未恢复则重启系统',
          value: 2
        },
        {
          label: '仅重启WAN网络',
          value: 3
        },
        {
          label: '仅重启WiFi网络',
          value: 4
        },
        {
          label: '先重启所有网络接口，仍未恢复则重启系统',
          value: 5
        },
        {
          label: '先重启I2tp VPN，仍未恢复则重启系统',
          value: 6
        },
        {
          label: '先重启pptp VPN，仍未恢复则重启系统',
          value: 7
        },
        {
          label: '先重启openVPN，仍未恢复则重启系统',
          value: 8
        },
        {
          label: '先重启ipsecVPN，仍未恢复则重启系统',
          value: 9
        }
      ],
      periods: [
        {
          label: '30 seconds',
          value: 0
        },
        {
          label: '60 seconds',
          value: 1
        },
        {
          label: '90 seconds',
          value: 2
        },
        {
          label: '600 seconds',
          value: 3
        },
        {
          label: '1 hour',
          value: 4
        },
        {
          label: '1 day',
          value: 5
        },
        {
          label: '2 day',
          value: 6
        },
        {
          label: '3 day',
          value: 7
        },
        {
          label: '4 day',
          value: 8
        },
        {
          label: '5 day',
          value: 9
        },
        {
          label: '6 day',
          value: 10
        },
        {
          label: '7 day',
          value: 11
        },
        {
          label: '15 day',
          value: 12
        },
        {
          label: '30 day',
          value: 13
        },
        {
          label: '60 day',
          value: 14
        },
        {
          label: '90 day',
          value: 15
        },
        {
          label: '180 day',
          value: 16
        },
        {
          label: '360 day',
          value: 17
        }
      ]
    }
  },
  methods: {
    onAdd() {
      this.dialogVisible = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
          this.dialogVisible = false
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style lang="scss" scoped>
.el-icon-warning {
  margin-left: 10px;
  font-size: 20px;
  color: #409EFF;
}
</style>